import React, { useEffect, useState } from 'react';
import { Tabs, Card } from 'antd';
import classNames from 'classnames';
import './index.less';
export default (props) => {
  const [data, setData] = useState('');
  const {
    onChange,
    tabList = [],
    //当前选中 下标
    lineStyle = {},
    //下面横线样式
    fontStyle = {},
    //文选中字额外颜色样式
    sizeStyle = {},
    //未选中文字大小样式
    value,
  } = props;
  useEffect(() => {
    setData(value);
  }, [value]);
  return (
    <div className="TabComponents_box">
      {[{ key: '全部', value: '' }, ...tabList].map((item, index) => {
        const { key, value } = item;
        return (
          <div
            key={index}
            className={classNames('tabFont', data === value ? 'tabChecked' : 'tabNoChecked')}
            style={data === value ? fontStyle : sizeStyle}
            onClick={(e) => onChange(value)}
          >
            {key}
            {data === value && <div className="tab_line tab_color" style={lineStyle}></div>}
          </div>
        );
      })}
    </div>
  );
};
